import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";

Vue.use(VueRouter);

const routes = [
  {
    path: "/", //网页打开第一次默认路由路径就是'/'
    component: () => import("@/views/layout"),
    redirect: "/home", //会导致路由规则数组在此匹配
    // 在首页布局页中嵌套子集路由
    children: [
      // 侧边栏导航，点击会切换路由地址，路由地址靠数据请求回来铺设上去的
      // 所以你得路由规则要配合它保持一致
      {
        path: "home",
        component: () => import("@/views/home"),
      },
      {
        path: "user-info",
        component: () => import("@/views/user/userInfo.vue"),
      },
      {
        path: "user-avatar",
        component: () => import("@/views/user/userAvatar.vue"),
      },
      {
        path: "user-pwd",
        component: () => import("@/views/user/userPwd.vue"),
      },
      {
        path: "art-cate",
        component: () => import("@/views/article/artCate"),
      },
      {
        path: "art-list",
        component: () => import("@/views/article/artList"),
      },
    ],
  },
  {
    path: "/reg",
    // webpack提供的import函数来路由懒加载导入组件
    component: () => import("@/views/register"),
  },
  {
    path: "/login",
    component: () => import("@/views/login"),
  },
];

const router = new VueRouter({
  routes,
});

// 白名单，无需登录可以访问的地址
let whiteList = ["/login", "/reg"];

// 全局前置路由守卫
// 浏览器第一次打开项目页面，会触发一次全局前置路由守卫函数
// 有token就代表登录了，没有就是没登录，强制切换到登录页
router.beforeEach((to, from, next) => {
  const token = store.state.token;
  if (token) {
    if (!store.state.userInfo.username) {
      store.dispatch("getUserInfoActions");
    }
    next();
  } else {
    // next()强制切换到登录路径上
    // 但是这样会出现一个问题，next强制切换路径地址也会走路由守卫，这样就会造成死循环，报错，
    // 因为强制到登录页面，登录页面没有token，然后在强制跳转到登录，这样一直循环下去
    // 使用路由白名单
    // includes的作用：判断值是否在数组中出现过，出现过则返回true
    if (whiteList.includes(to.path)) {
      // 如果在白名单中，则直接next，放行（路由的全局前置守护不会再被触发了，而是匹配路由表，让组件挂载）
      next();
    } else {
      next("/login");
    }
  }
});

export default router;

// <!-- 退出登录，重新登录，只走相关组件代码（异步dom切换，不会导致所有代码重新执行，App，vue不走）
// 在App.vue中写下面这个代码
//  created(){
//     // 测试是否将用户信息保存在store中
//     this.$store.dispatch('getUserInfoActions')
//   } -->
//  <!-- 换个账号应该重新请求用户数据 ，要怎么做呢？-->
// <!-- 问题解决：可以在登录页面，登录成功后，在发请求去拿到这个用户信息
//               还可以再全局前置路由守卫中写，在路由跳转时，判断+获取
// -->
